<template>
  <div>
    <p>
      状态：<span v-if="ruleForm3.auditStatus != 1" style="color: red"
        >未审核</span
      ><span v-else style="color: blue">审核通过</span>
    </p>
    <div>
      <el-upload
        class="avatar-uploader"
        style="display: inline"
        action="http://localhost:8080/ocr/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus />营业执照</el-icon>
      </el-upload>
      <el-upload
        class="avatar-uploader"
        style="display: inline"
        action="http://localhost:8080/ocr/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess0"
      >
        <img v-if="imageUrl0" :src="imageUrl0" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus />门头</el-icon>
      </el-upload>
      <el-upload
        class="avatar-uploader"
        style="display: inline"
        action="http://localhost:8080/ocr/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess01"
      >
        <img v-if="imageUrl01" :src="imageUrl01" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus />内景</el-icon>
      </el-upload>
    </div>
    <el-form
      style="max-width: 600px"
      :model="ruleForm3"
      status-icon
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item></el-form-item>
      <el-form-item label="法人姓名">
        <el-input v-model="ruleForm3.legal_person" />
      </el-form-item>
      <el-form-item label="企业名称">
        <el-input v-model="ruleForm3.designation" />
      </el-form-item>
      <el-form-item label="信用代码">
        <el-input v-model="ruleForm3.creditCode" />
      </el-form-item>
      <el-form-item label="营业期限">
        <el-input v-model="ruleForm3.name" />
      </el-form-item>
      <el-form-item label="经营地址">
        <el-input v-model="ruleForm3.residence" />
      </el-form-item>
      <el-form-item label="主营类目">
        <el-input v-model="ruleForm3.ilk" />
      </el-form-item>
      <el-form-item style="width: 100%; margin-left: 15px">
        <el-button type="primary" style="width: 45%" @click="tijiaozj"
          >确认</el-button
        >
        <el-button style="width: 45%">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
//定义路游器
import { useRouter } from "vue-router";
const router = useRouter();
import type { UploadProps } from "element-plus";
//上传图片
const imageUrl = ref("");
const imageUrl0 = ref("");
const imageUrl01 = ref("");
//表单
const ruleForm3 = ref({});
//回响应图片
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  ruleForm3.value.image = response.shuju;
};
const handleAvatarSuccess0: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl0.value = URL.createObjectURL(uploadFile.raw!);
  ruleForm3.value.image1 = response.shuju;
};
const handleAvatarSuccess01: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imageUrl01.value = URL.createObjectURL(uploadFile.raw!);
  ruleForm3.value.image2 = response.shuju;
};
//js文件
import businessjs from "@/api/merchant/business";
//缓存
import { useTokenStore } from "@/stores/token";

//缓存
const yonghu = useTokenStore().token;
//查询回数据
const xiangqing = async (uid) => {
  let data = await businessjs.zhizhaoxq(uid);
  if (data.flag == true){
    ruleForm3.value = data.shuju;
    imageUrl.value = ruleForm3.value.image;
    imageUrl0.value = ruleForm3.value.image1;
    imageUrl01.value = ruleForm3.value.image2;
  }
};
//提交按钮
const tijiaozj = async () => {
  ruleForm3.value.sanhuid = yonghu.id;
  let data = await businessjs.gaiorzeng(ruleForm3);
  if (data.flag) {
    ElMessage({
      message: "提交成功",
      type: "success",
    });
  } else {
    ElMessage.error("提交失败");
  }
};
onMounted(() => {
  xiangqing(yonghu.businessLicense);
});
</script>


<style lang='scss' scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
img {
  width: 300px;
  height: 200px;
}
</style>